<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">注册</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="userName">
                    <el-input v-model="param.userName" placeholder="请输入用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            type="password"
                            placeholder="请输入密码"
                            v-model="param.password"
                    >
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="realName">
                    <el-input v-model="param.realName" placeholder="请输入真实姓名">
                    </el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input v-model="param.phone" placeholder="请输入联系方式">
                    </el-input>
                </el-form-item>
                <el-form-item prop="kemu">
                    <el-input v-model="param.kemu" placeholder="请输入考试科目代码">
                    </el-input>
                </el-form-item>
                <el-form-item prop="score">
                    <el-input v-model="param.score" placeholder="请输入考研成绩">
                    </el-input>
                </el-form-item>
                <el-form-item  prop="collegeId">
                    <el-select v-model="param.collegeId" placeholder="请选择本科学校">
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.collegeName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  prop="subjectId">
                    <el-select v-model="param.subjectId" placeholder="请选择本科专业">
                        <el-option
                                v-for="item in options2"
                                :key="item.id"
                                :label="item.subjectName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="imageName">
                    <single-upload title="请上传头像" v-model="param.imageUrl"></single-upload>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="saveAndUpdateUserInfo">注册</el-button>
                </div>
            </el-form>
        </div>

    </div>
</template>

<script>


    import SingleUpload from '../common/singleUpload';
    import { saveUserInfo } from '../../api/user';
    import { getCollegeAndSubject, getCollegeInfo } from '../../api/college';
    import { getSubjectInfo } from '../../api/subject';

    export default {
        components: { SingleUpload },
        data: function() {
            return {
                param: {
                    username: '',
                    password: '',
                },
                selectedOptions:[],
                list:[],
                addVisible:false,
                form:{
                },
                rules: {
                    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    roleId: [{ required: true, message: '请选择用户类型', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 10, message: '长度在 5到 10 个字符' }],
                    realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                    phone:[{required:true,message: "请输入手机号码", trigger: "blur"},
                        {pattern:/(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
                            message: '输入的手机号码格式不正确，请重新输入',trigger:'blur'}],
                    imageUrl: [{ required: true, message: '请上上传头像', trigger: 'blur' }],


                },
                options:[],
                options2:[],
            };
        },

        methods: {

            saveAndUpdateUserInfo(){

                this.$refs.login.validate(valid => {
                    if (valid) {
                        this.param.userType = 3;
                        saveUserInfo(this.param).then(res =>{
                            if (res.code === 1){
                                this.$message.success('注册成功,现在可以去登录了');
                                sessionStorage.setItem('userStatus',"111");
                                setTimeout(() =>{
                                    this.$router.push('/login')
                                },2000)
                            }else {
                                this.$message.error('注册失败');
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleChange(value) {
                console.log(value);
                this.param.collegeId = value[0];
                this.param.subjectId = value[1]
            },
            getData(){
                getCollegeInfo({pageSize: 100}).then(res =>{
                    this.options = res.data.list;
                })
                getSubjectInfo({pageSize: 100}).then(res =>{
                    this.options2 = res.data.list;
                })
            }
        },

        created() {
            this.getData();
        },
    };
</script>

<style scoped>
    .login-wrap {
        height: auto;
        position: relative;
        width: 100%;
        height: 120%;
        background: url(../../assets/img/back.png) no-repeat;
        /*background-image: url(http://demo.mxyhn.xyz:8020/cssthemes6/1124zh5/images/backgrounds/1.jpg);*/
        background-size: 100%;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login {
        position: absolute;
        left: 40%;
        top: 25%;
        width: 650px;

        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
    .ms-content {
        padding: 30px 30px;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>
